<template>
  <div>
    <el-dialog
      :title="'修改'+isManyOnly"
      :visible.sync="editFormVisible"
      width="50%"
      @close="editFormClose"
    >
      <el-form :model="editFormData" :rules="editFormRules" ref="editFormRef" label-width="80px">
        <el-form-item :label="isManyOnly" prop="attr_name" size="small">
          <el-input v-model.trim="editFormData.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitForm" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 父组件通过计算属性传过来的1、标题名称 用字符串拼接到title上、2、当前修改的form数据
  props: ["isManyOnly", "editFormData"],
  data() {
    return {
      editFormVisible: false,
      // 验证规则
      editFormRules: {
        attr_name: [
           { required: true, message: "请输入参数或属性名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  methods: {
    // 显示弹出框
    showDialog() {
      this.editFormVisible = true;
    },
    // 监听新增用户的关闭事件重置表单
    editFormClose() {
      this.$refs.editFormRef.resetFields();
      this.editFormVisible = false;
    },
    submitForm() {
      this.$refs.editFormRef.validate((valid) => {
        if (valid) {
          this.$axios
            .put(
              `categories/${this.editFormData.cat_id}/attributes/${this.editFormData.attr_id}`,
              {
                attr_name: this.editFormData.attr_name,
                attr_sel: this.editFormData.attr_sel,
              }
            )
            .then((res) => {
              if ((res.data.meta.status = 200)) {
                this.$message.success("修改参数成功");
                this.$emit("refreshData", true);
              } else {
                this.$message.error("修改参数失败");
              }
              this.editFormVisible = false;
            })
            .catch((error) => {
              console.log(error); //cathch用于处理错误事件
            });
        } else {
          this.$message.error("预验证失败");
          return;
        }
      });
    },
  },
};
</script>
 
<style scoped>
</style>